<!--
 * createor: zc
 * email: zc8023zs@163.com
 * create_time: 2020/3/14 13:46:24
 *-->
<template>
<el-container>
	<el-main>
		<el-form ref="dataForm" :model="formData" label-width="200px" style="padding:5% 5% 0 5%">
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" @click="onSave" :loading="saveLoading">{{$t('table.save')}}</el-button>
          </el-form-item> 
          <input type="hidden" v-model="formData.article_id"/>
        <el-form-item label="上市时间：">
            <el-date-picker v-model="formData._birth_time" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="附件上传：">
            <el-upload
              action=""
              :limit="2"
              :before-upload="fileBeforeAvatarUpload">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">{{formData.file}}</div>
            </el-upload>
        </el-form-item>
        <el-form-item label="手机附件上传：">
            <el-upload
              action=""
              :limit="2"
              :before-upload="file1BeforeAvatarUpload">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">{{formData.file1}}</div>
            </el-upload>
        </el-form-item>
        <el-form-item label="焦点图：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="iconBeforeAvatarUpload"> 
                <img v-if="formData.icon" :src="uploadrooturl+formData.icon" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="单图上传：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="icon1BeforeAvatarUpload"> 
                <img v-if="formData.icon1" :src="uploadrooturl+formData.icon1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="图标：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="icon2BeforeAvatarUpload"> 
                <img v-if="formData.icon2" :src="uploadrooturl+formData.icon2" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="下载列表图：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="icon3BeforeAvatarUpload"> 
                <img v-if="formData.icon3" :src="uploadrooturl+formData.icon3" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="下载详情图：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="icon4BeforeAvatarUpload"> 
                <img v-if="formData.icon4" :src="uploadrooturl+formData.icon4" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="下载手机banner图：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="icon5BeforeAvatarUpload"> 
                <img v-if="formData.icon5" :src="uploadrooturl+formData.icon5" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="手机图标：">
          <div class="avatar-uploader">
            <div class="el-upload el-upload--text">
              <el-upload
                class="avatar-uploader"
                accept="image/png, image/jpeg"
                action = ""
                :show-file-list="false"
                :before-upload="icon6BeforeAvatarUpload"> 
                <img v-if="formData.icon6" :src="uploadrooturl+formData.icon6" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="下载手机详情图（多图）：">
          <el-upload
             ref="icon7"
             action = ""
            :file-list="formData.icon7s"
            :before-upload="icon7BeforeAvatarUpload"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过XXkb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="软件厂商：">
          <el-input v-model="formData.fjcs" placeholder="请输入软件厂商"></el-input>
        </el-form-item>
        <el-form-item label="软件授权：">
            <el-select v-model="formData.rjsq" placeholder="请选择">
                <el-option
                  v-for="item in rjsqSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="软件授权其它：">
          <el-input type="textarea" :rows="2" v-model="formData.rjsqqt" placeholder="请输入软件授权其它"></el-input>
        </el-form-item>
        <el-form-item label="软件语言：">
            <el-select v-model="formData.rjyy" placeholder="请选择">
                <el-option
                  v-for="item in rjyySelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="应用平台：">
          <el-input v-model="formData.yypt" placeholder="请输入应用平台"></el-input>
        </el-form-item>
          <input type="hidden" v-model="formData.version_id"/>
		</el-form>
	</el-main>
</el-container>
</template>
<style scoped>
body .app-container .el-container,
body .app-container .el-header,
body .app-container .el-main,
body .el-container,
body .el-header,
body .el-main {
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
import {
  article_model_5Selecttree,
  article_model_5Selectpage,
  article_model_5Select,
  article_model_5Add,
  article_model_5Update,
  article_model_5Del,
  article_model_5Info
} from '@/api/project/article/project_article_article_model_5'
import { fileUp,fileUpInfo } from "@/api/project/system/project_sys_sys_upload";
export default {
  name: "a_articlea_article_model_5_edit",
  components: {  },
  data() {
    return {
      curdAction: "",
      saveLoading: false,
      uploadrooturl: "",
      formData: {
        article_id: null, 
        birth_time: null, 
        file: null, 
        file1: null, 
        icon: null, 
        icon1: null, 
        icon2: null, 
        icon3: null, 
        icon4: null, 
        icon5: null, 
        icon6: null, 
        icon7: null, 
        fjcs: null, 
        rjsq: null, 
        rjsqqt: null, 
        rjyy: null, 
        yypt: null, 
        version_id: null, 
    },
      rjsqSelectData: [
        {value: 1,label: '免费'},
        {value: 2,label: '收费'},
        {value: 3,label: '其它'},
      ],
      rjyySelectData: [
        {value: 1,label: '简体中文'},
        {value: 2,label: '英文'},
      ],
    }
  },
  created(){
    var result = location.search.match(new RegExp("[\?\&]id=([^\&]+)", "i"));
    this.formData.article_id=result[1];
    fileUpInfo().then(r=>{
        this.uploadrooturl = r.dataSingle.urlroot;
        this.onInfo(this.formData);
    });
  },
  methods:{
    fileHandleAvatarSuccess(r, file){
      this.formData.file = r.dataSingle.videopath;
    },
    fileBeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.fileHandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    file1HandleAvatarSuccess(r, file){
      this.formData.file1 = r.dataSingle.videopath;
    },
    file1BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.file1HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    iconHandleAvatarSuccess(r, file){
      this.formData.icon = r.dataSingle.videopath;
    },
    iconBeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.iconHandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    icon1HandleAvatarSuccess(r, file){
      this.formData.icon1 = r.dataSingle.videopath;
    },
    icon1BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.icon1HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    icon2HandleAvatarSuccess(r, file){
      this.formData.icon2 = r.dataSingle.videopath;
    },
    icon2BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.icon2HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    icon3HandleAvatarSuccess(r, file){
      this.formData.icon3 = r.dataSingle.videopath;
    },
    icon3BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.icon3HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    icon4HandleAvatarSuccess(r, file){
      this.formData.icon4 = r.dataSingle.videopath;
    },
    icon4BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.icon4HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    icon5HandleAvatarSuccess(r, file){
      this.formData.icon5 = r.dataSingle.videopath;
    },
    icon5BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.icon5HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    icon6HandleAvatarSuccess(r, file){
      this.formData.icon6 = r.dataSingle.videopath;
    },
    icon6BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.icon6HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    icon7HandleAvatarSuccess(r, file){
      this.formData.icon7s.push({name:r.dataSingle.videopath,url:r.dataSingle.videofullpath});
      var img=[];
      for(var i=0;i<this.formData.icon7s.length;i++){
        img.push(this.formData.icon7s[i].name);
      }
      this.formData.icon7=img.join(',');
    },
    icon7BeforeAvatarUpload(file){
      const formData = new FormData();
      formData.append('file', file);
      fileUp(formData,function(progressEvent){
      }).then(r => {
         this.icon7HandleAvatarSuccess(r, file);
      }).catch(err => {
        console.log(err);
      });
      return false;
    },
    onSearch(){
      this.listQuery.page=1;
      this.getList();
    },
    onInfoPage(scope){
      var view = this.$store.state.permission.routesMap["/article/article_model_5_info"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:scope.row.article_id} })
    }, 
    reset(){
      this.formData = {
        article_id: null, 
        birth_time: null, 
        file: null, 
        file1: null, 
        icon: null, 
        icon1: null, 
        icon2: null, 
        icon3: null, 
        icon4: null, 
        icon5: null, 
        icon6: null, 
        icon7: [], 
        fjcs: null, 
        rjsq: null, 
        rjsqqt: null, 
        rjyy: null, 
        yypt: null, 
        version_id: null, 
      };
 
    },
    onSave(){
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          if (this.curdAction == "add") {
            article_model_5Add(this.$qs.stringify(this.formData)).then(r => {
                this.formData.article_id=r.dataSingle;
                this.curdAction = 'update';
                this.saveLoading  = false;
                this.$notify({
                  title: "添加成功",
                  type: "success",
                  duration: 2000
                });
                var that = this;
                setTimeout(function(){ 
                  that.closeSelectedTag();
                },2000);
            }).catch(()=>{
              this.saveLoading=false;
            });
          } else if (this.curdAction == "update") {
            article_model_5Update(this.$qs.stringify(this.formData)).then(r => {
                this.saveLoading  = false;
                this.$notify({
                  title: "修改成功",
                  type: "success",
                  duration: 2000
                });
                var that = this;
                setTimeout(function(){ 
                  that.closeSelectedTag();
                },2000);
            }).catch(()=>{
              this.saveLoading=false;
            });
          }
        }
      });
    },
    onInfo(data){
        article_model_5Info({id:data.article_id}).then(r=>{
          if(r.dataSingle==null){
            this.curdAction = "add";
            return false;
          }
            this.formData.article_id=r.dataSingle.article_id;
            this.formData.birth_time=r.dataSingle.birth_time;
            this.formData.file=r.dataSingle.file;
            this.formData.file1=r.dataSingle.file1;
            this.formData.icon=r.dataSingle.icon;
            this.formData.icon1=r.dataSingle.icon1;
            this.formData.icon2=r.dataSingle.icon2;
            this.formData.icon3=r.dataSingle.icon3;
            this.formData.icon4=r.dataSingle.icon4;
            this.formData.icon5=r.dataSingle.icon5;
            this.formData.icon6=r.dataSingle.icon6;
            this.formData.icon7=r.dataSingle.icon7;
            var array = this.formData.icon7.split(',');
            if(array && array.length>0 && array[0]!=''){
                for(var i=0;i<array.length;i++){
                  this.formData.icon7s.push({name:array[i],url:this.uploadrooturl+array[i]});
                }
            }
            this.formData.fjcs=r.dataSingle.fjcs;
            this.formData.rjsq=r.dataSingle.rjsq;
            this.formData.rjsqqt=r.dataSingle.rjsqqt;
            this.formData.rjyy=r.dataSingle.rjyy;
            this.formData.yypt=r.dataSingle.yypt;
            this.formData.version_id=r.dataSingle.version_id;
            this.curdAction = "update";
        });
    },
    closeSelectedTag() {
      var view = this.$store.state.permission.routesMap["/article/article_model_5_edit"];
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView.fullPath)
      } else {
        if (view.name === 'Dashboard') {
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    },
    isActive(route) {
      return route.path === this.$route.path
    },
  }
}
</script>